<template>
  <div class="recharge">
    <div class="login_top flex">
      <div class="left_logo" />
      <div class="flex-1 flex flex-between-center">
        <p style="font-size:24px;padding-left:35px">充值中心</p>
        <!-- <div class="flex align-center">
          <img
            style="width:32px;height:28px;margin-right:10px"
            src="../../assets/images/tel.png"
            alt="咨询热线"
          >
          <div
            class="flex-1"
            style="line-height:18px"
          >
            <p>咨询热线</p>
            <p class="blue-font">400-686-8341</p>
          </div>
        </div> -->
      </div>
    </div>
    <div style="background-color:#f5f5f5;padding:15px 0;">
      <div class="pay_code">
        <div class="top">
          <h5 class="bold-font">支付金额</h5>
          <p
            class="red-font bold-font"
            style="font-size:35px;margin:20px 0"
          >￥{{ amount }}</p>
          <div class="flex">
            <p class="flex-1 color-666"><label class="bold-font">交易类型：</label>店铺金额充值</p>
            <p class="flex-1 color-666"><label class="bold-font">供应商名称：</label>{{ userName }}</p>
          </div>
        </div>
        <div class="text-center bottom">
          <p class="color:666">距离二维码过期：</p>
          <p
            class="red-font bold-font"
            style="font-size:30px;margin:10px 0 40px;"
          >{{ minute }}:{{ seconds }}</p>
          <div class="code_wrap">
            <el-image
              style="width:250px;height:250px"
              :src="code_url"
            >
              <div
                slot="error"
                class="image-slot"
              >
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
            <div
              class="flex align-center"
              style="padding: 4px 30px 24px"
            >
              <img
                style="width:42px;height:42px;margin-right:25px"
                src="../../assets/images/scan.png"
                alt="扫码"
              >
              <p
                class="flex-1"
                style="font-size:16px;line-height:16px"
              >打开手机支付宝扫一扫继续付款</p>
            </div>
          </div>
          <p
            class="blue-font pointer"
            style="margin-top:40px"
            @click="$router.push({name: 'recharge'})"
          >返回选择其他支付方式</p>
        </div>
      </div>
    </div>
    <div class="login_footer">
      <!-- <a
        href="https://beian.miit.gov.cn"
        target="_blank"
      >Copyright©2020-2022 河南众亿鑫科技有限公司 版权所有 豫ICP备20015279号-2
      </a> -->
    </div>
  </div>
</template>

<script>
import { getName } from '@/utils/auth'
import QRCode from 'qrcode'
import { rechargeQuery } from '@/api/account'
export default {
  data() {
    return {
      amount: '',
      qr_code: '',
      code_url: '',
      log_id: '',
      out_trade_no: '',
      minute: '00',
      seconds: '00',
      interval: null,
      timer: null // 计时
    }
  },
  computed: {
    userName() {
      return getName()
    }
  },
  created() {
    this.getData()
    this.startLoop()
  },
  beforeDestroy() {
    // this.clear();
  },
  methods: {
    getData() {
      this.amount = sessionStorage.getItem('amount')
      this.qr_code = sessionStorage.getItem('qr_code')
      this.log_id = sessionStorage.getItem('log_id')
      this.out_trade_no = sessionStorage.getItem('out_trade_no')
      if (this.qr_code) {
        this.setTimer()
        this.setTimeData(3 * 60 * 1000)
      }
      QRCode.toDataURL(this.qr_code)
        .then(res => {
          this.code_url = res
        })
        .catch(err => {
          console.error(err)
        })
    },
    startLoop() {
      this.timer = setInterval(() => {
        this.isPaySuccess()
      }, 3000)
    },
    isPaySuccess() {
      rechargeQuery(this.log_id).then(res => {
        this.$router.push({ name: 'rechargeSuccess' })
      }).catch(err => { })
    },
    setTimeData(cm) {
      this.minute = Math.floor((cm / 1000 / 60) % 60)
      this.minute = this.minute.toString().length == 1 ? '0' + this.minute : this.minute
      this.seconds = Math.floor((cm / 1000) % 60)
      this.seconds = this.seconds.toString().length == 1 ? '0' + this.seconds : this.seconds
    },
    setTimer() {
      const _this = this
      this.interval = setInterval(function() {
        _this.payCountdown(3 * 60 * 1000)
        clearInterval(_this.interval)
      }, 1000)
    },
    /**
     * 支付倒计时
     */
    payCountdown(cm) {
      if (cm >= 0) {
        this.setTimeData(cm)
        const _this = this
        setTimeout(function() {
          cm -= 1000
          _this.payCountdown(cm)
        }, 1000)
      } else {
        this.clear()
        this.$router.push({ name: 'myIndex' })
      }
    },
    clear() {
      clearInterval(this.timer)
      this.timer = null
      clearInterval(this.interval)
      this.interval = null
      this.minute = '00'
      this.seconds = '00'
      sessionStorage.removeItem('amount')
      sessionStorage.removeItem('out_trade_no')
      sessionStorage.removeItem('log_id')
      sessionStorage.removeItem('qr_code')
    },
    toNext() {
      clearInterval(this.timer)
      this.timer = null
      clearInterval(this.interval)
      this.interval = null
      this.minute = '00'
      this.seconds = '00'
      sessionStorage.removeItem('log_id')
      sessionStorage.removeItem('qr_code')
    }
  },
  beforeRouteLeave(to, from, next) {
    if (to.name !== 'rechargeSuccess' && to.name !== 'myIndex') {
      this.$confirm('您确定要离开支付吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.clear()
        next()
      }).catch(() => {
        next(false)
      })
    } else if (to.name === 'rechargeSuccess') {
      this.toNext()
      next()
    } else {
      this.clear()
      next()
    }
  }
}
</script>

<style lang="scss" scoped>
.login_top {
  height: 75px;
  width: 1200px;
  margin: 0 auto;
  .left_logo {
    height: 48px;
    width: 172px;
    margin-top: 15px;
    background: url(../../assets/images/login_logo.png) no-repeat;
    background-size: 100%;
  }
}
.login_footer {
  text-align: center;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  text-decoration: none;
  padding: 20px 0;
  a:hover {
    color: #53a6ff;
  }
}
.pay_code {
  width: 1000px;
  margin: 0 auto;
  .top,
  .bottom {
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
  }
  .top {
    padding: 20px 50px;
  }
  .bottom {
    margin-top: 20px;
    padding: 50px 0;
  }
}
.code_wrap {
  width: 270px;
  text-align: center;
  margin: auto;
  border: 1px solid #d3d3d3;
}
</style>
